<template>
    <div class="china-map">
        <div class="china-chart" :id="chinaId"></div>
    </div>
</template>

<script>
import "@/const/mapJson/china";
import {chinaGeoCoordMap} from "./staticdata";
export default {
	name: "china-map",
	components: {},
	props: {
		chinaId: {
			type: String,
			default: "china-id",
		},
	},
	data() {
		return {
			geoCoordMap: chinaGeoCoordMap,
      color:['#69faff', '#69faff', '#69faff', '#69faff', '#69faff', '#69faff'],
      toCoord: [106.642792,29.751342],
      toName: "重庆长安汽车股份有限公司",
      fromList:[
        {
          title: "天津",
          radius: 30,
          center: [ 117.30903,39.04823]
        },
        {
          title: "河北保定",
          radius: 40,
          center: [ 115.468255,38.822763]
        },
        {
          title: "江苏常州",
          radius: 25,
          center: [ 119.6662,31.743787]
        },
        {
          title: "江苏泰州",
          radius: 30,
          center: [119.919442,32.279184]
        },
        {
          title: "江苏苏州",
          radius: 30,
          center: [120.513251,31.241549]
        },
        {
          title: "湖南长沙",
          radius: 15,
          center: [ 113.043648,28.198596]
        },
        {
          title: "广东佛山",
          radius: 25,
          center: [ 113.335301,22.767129]
        },
        {
          title: "",
          radius: 50,
          center: [104.238534,30.55075]
        },
        {
          title: "四川成都",
          radius: 50,
          center: [ 104.238534,30.55075]
        }
      ],
		};
	},
	computed: {},
	created() {
		this.$nextTick(() => {
			this.init();
		});
	},
	mounted() {
	},
	methods: {
    /**
     * 在这里封装出点击点的数据对应fromList的title还有经纬度
     */
    circleClick(item) {
      // let item ={
      //   center: { lat: 29.751342, lng: 106.642792 },
      //   title:""
      // }
      this.$emit('circleClick', item)
    },
    convertData() {
      let data = this.fromList
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        res.push({
          fromName: item.title,
          toName: this.toName,
          coords: [item.center,this.toCoord],
          value: item.radius
        });
      }
     return res;
    },
    convertData2() {
      let data = this.fromList;
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let toItem = data[i];
        res.push({
             name: toItem.title,
             value: [toItem.center[0],toItem.center[1],toItem.radius]
         });
      }
     return res;
    },
		init() {
 let series = [{
     type: 'map',
     map: 'china',
     //    width: '100%',
     geoIndex: 1,
     zlevel: 1,
     //    aspectScale: 0.75, //长宽比
     showLegendSymbol: false, // 存在legend时显示
     label: {
         normal: {
             show: false,
         },
         emphasis: {
             show: false,
             textStyle: {
                 color: '#ff6745'
             }
         }
     },
     roam: false,
     itemStyle: {
         normal: {
             areaColor: 'rgba(128, 128, 128, 0)',
             borderColor: '#49a7d5', //省市边界线00fcff 516a89

         },
         emphasis: {
             areaColor: '#49a7d5',
         }
     },
     data: [{
         name: '南海诸岛',
         value: 0,
         itemStyle: {
             normal: {
                 opacity: 0,
                 label: {
                     show: false
                 }
             }
         }
     }]
 }, ];

 series.push({
     name: this.toName,
     type: 'lines',
     zlevel: 3,
     symbol: ['none', 'circle'],
     effect: {
         show: true,
         period: 3, //箭头指向速度，值越小速度越快
         trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
         symbolSize: 4, //图标大小
     },
     lineStyle: {
         normal: {
             opacity: 1,
             curveness: 0.4, //曲线的弯曲程度
             color: '#609fd4'
         }
     },
     data: this.convertData()
 }, {
     name: this.toName,
     type: 'scatter',
     coordinateSystem: 'geo',
     zlevel: 2,
     rippleEffect: {
         brushType: 'stroke'
     },
     label: {
         normal: {
             show: true,
             position: 'right',
             formatter: '{b}',

         }
     },
      symbolSize: function (val) {
          return val[2]/2;
      },
     itemStyle: {
         normal: {
             //                fontSize: 80,
         }
     },
     data: this.convertData2()
 }, {
     type: 'effectScatter',
     coordinateSystem: 'geo',
     zlevel: 4,
     symbolSize: 30,
     label: {
         normal: {
             show: true,
             position: 'right',
             formatter: '{b}',

           color: '#fff27f'
         }
     },
     itemStyle: {
         normal: {
           color: '#fff27f'
         }
     },
     rippleEffect: {
         scale: 4,
         brushType: 'stroke'
     },
     data: [{
         name: this.toName,
         value: this.toCoord,
         visualMap: false
     }],
 }, {
     type: 'scatter',
     coordinateSystem: 'geo',
     zlevel: 4,
     symbolSize: 20,
     symbol: 'pin',
     itemStyle: {
         normal: {
           color: '#fff27f'
         }
     },
     rippleEffect: {
         //        brushType: 'stroke'
     },
     data: [{
         name: this.toName,
         value: this.toCoord,
         visualMap: false
     }],
 });


			let option = {
    //  tooltip: {
    //      trigger: 'item',
    //      formatter: function(params) {
    //          if (params.seriesType == "scatter" && params.name != "重庆长安汽车股份有限公司") {
    //              return "<br>" + params.seriesName + " ---> " + params.data.name + "<br />数量：" + params.data.value[2];
    //          } else if (params.seriesType == "lines") {
    //              return "<br>" + params.data.fromName + " ---> " + params.data.toName + "<br />数量：" + params.data.value;
    //          } else {
    //              return params.name;
    //          }
    //      }
    //  },
     visualMap: {
         min: 0,
         max: 100,
         calculable: true,
         color: this.color,
         show: false
     },
     geo: {
         map: 'china',
         zoom: 1.25,
         zlevel: 2,
         label: {
             emphasis: {
                 show: false
             },
         },
         roam: false, //是否允许缩放
         itemStyle: {
             normal: {
                 areaColor: '#214278',
                 borderColor: '#195BB9', //省市边界线00fcff 516a89

             },
             emphasis: {
                 color: '#112246' //悬浮背景
             }
         },
     },
     series: series
 };
			this.$nextTick(() => {
				let chart = this.$echarts.init(document.getElementById(this.chinaId));
				chart.clear();
				chart.setOption(option);
				chart.resize();
        let that = this;
        //
        chart.on('click',  function(param) {
           console.log('click',  param)
          if(param.componentSubType== "scatter"){
            let paramdata = param.data;
            let item ={
              center: { lng: paramdata.value[0], lat: paramdata.value[1] },
              title:paramdata.name
            }
            that.circleClick(item);
            // console.log('click',  item)
          }

            //param.name x轴值,param.data y轴值
            // alert(param.name+":"+param.data)
        });
			});
		},
	},
	watch: {
		mapData: {
			handler(cval, oval) {
				this.$nextTick(() => {
					this.init();
				});
			},
			deep: true,
		},
	},
};
</script>

<style scoped lang="scss">
    .china-map{
        width: 100%;
        height: 100%;
        .china-chart{
            width: 100%;
            height: 100%;
        }
    }
</style>
